<template>
    <header>
        <p class="project-title">{{projectTitle}}</p>
        <div class="r-content">
            <p class="name">{{projectName}}</p>
            <div class="logout" @click="logOut"></div>
        </div>
    </header>
</template>

<style lang="scss" scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.project-title {
    font-size: 0.24rem;
    font-weight: 500;
    color: #ffffff;
}
.r-content {
    display: flex;
    ::v-deep .name {
        color: #ffffff;
        font-size: 0.14rem;
    }
    .logout {
        width: 0.24rem;
        height: 0.24rem;
        margin-left: 0.16rem;
        background: url('../assets/logout.png') center no-repeat;
        background-size: cover;
        cursor: pointer;
    }
}
</style>

<script>
export default {
    name: 'CommonHeader',
    data() {
        return {
            // userImg: require('../assets/images/portrait.jpg'),
            userImg: '',
        };
    },
    methods: {
        logOut() {
            this.$store.commit('clearToken');
            this.$router.push('/login');
        },
    },
    watch: {
        projectTitle: {
            handler() {},
            deep: true,
        },
        projectName: {
            handler() {},
            deep: true,
        },
    },
    computed: {
        projectTitle() {
            return this.$store.state.user.scm_project_title;
        },
        projectName() {
            return this.$store.state.user.project_name;
        },
    },
};
</script>
